import React, { useState } from 'react'
import { Button, NavBar } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
// import api from '../../api/axios'
import styles from './detail.module.css'
import { HeartOutline } from 'antd-mobile-icons'
import { useEffect } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";
function Detail() {
  const { state } = useLocation()
  const Navigate = useNavigate()
  const [heart, setHeart] = useState(JSON.parse(localStorage.getItem('heart')) || [])
  console.log(state)
  const xin = (state) => {
    let xin = heart.some((it) => it.id == state.id)
    if (xin) {
      let shou = heart.filter((it) => it.id !== state.id)
      setHeart(shou)
      localStorage.setItem('heart', JSON.stringify([...heart, state]))
    } else {
      setHeart([...heart, state])
      localStorage.setItem('heart', JSON.stringify([...heart, state]))
    }
  }
  const yuding = (state) => {
    Navigate('/xuan', { state: state })
  }
  let map = null;

  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: "182e4aa1c819f46f15e39396bee911a7",
    };
    AMapLoader.load({
      key: "c5146a16e963fce1c09ee1979a0dd3e2", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
        var position = [
          [116.493195, 39.993253],
          [116.473195, 39.993253],
          [116.453195, 39.993253],
          [116.493195, 39.973253],
          [116.473195, 39.973253],
          [116.453195, 39.973253],
          [116.493195, 39.953253],
          [116.473195, 39.953253],
          [116.453195, 39.953253]
        ];
        var content = [
          'bottom-left',
          'bottom-center',
          'bottom-right',
          'middle-left',
          'center',
          'middle-right',
          'top-left',
          'top-center',
          'top-right'
        ]
        for (var i = 0; i < position.length; i++) {
          const marker = new AMap.Marker({
            position: position[i],
            label:{
               content: '北京', //将 html 传给 content
            offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
            }
           
          });
          map.add(marker);
        }

      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map?.destroy();
    };
  }, []);

  return (
    <div>
      <NavBar onBack={() => Navigate(-1)}>活动详情</NavBar>
      <HeartOutline onClick={() => xin(state)} color={heart.some((it) => it.id == state.id) ? 'red' : '#ccc'} className={styles.xin_css} />
      <div>
        <div style={{ background: 'rgba(220, 225, 225, 1)', marginLeft: '0px', borderRadius: '8px' }}>
          <div>
            <img style={{ width: '150px', height: '150px', marginLeft: '80px' }} src={state.image} />
          </div>
          <div style={{ padding: '20px,15px' }}>
            <p style={{ marginLeft: '10px' }}>{state.title}</p>
            <p style={{
              color: 'rgba(218, 21, 195, 0.8)', width: '60px', height: '30px',
              marginTop: '-20px', marginLeft: '250px', borderRadius: '30px', background: 'rgba(168, 194, 194, 1)',
              textAlign: 'center', lineHeight: '30px'
            }}>￥500
            </p>
            <div className={styles.bu_css}>
              <span style={{ marginLeft: '10px' }}>128 参与者</span>
              <p style={{ marginLeft: '10px' }}>{state.date}</p>
            </div>
            <div>
              <h5 style={{ marginTop: '20px', marginLeft: '10px', marginBottom: '10px' }}>活动介绍</h5>
              <span style={{ padding: '20px 0', color: '#9b9595ff', marginLeft: '10px' }}>
                公共演艺艺人在核实地彩色的黑技术等级说法几哈飞机换手机活动时间
                回到家后电视机顶盒京东数科登记卡手打合计都是见好就收当今世界
              </span>
            </div>
            <div className={styles.can_css}>
              <img style={{ width: '30px', height: '30px', marginTop: '10px', marginLeft: '10px' }} src={state.image} />
              <p style={{ marginLeft: '10px', marginTop: '10px' }}>Koto</p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <h3 style={{ padding: '15px' }}>活动位置</h3>
        <div
          id="container"
          style={{ height: "200px" }}
        ></div>
      </div>
      <div>
        <Button onClick={() => yuding(state)} style={{
          width: '350px', height: '50px', marginLeft: '13px',
          color: '#fff', background: 'rgba(111, 13, 141, 0.87)', borderRadius: '40px'
        }}>立即预定</Button>
      </div>
    </div>
  )
}

export default Detail
